<template>
  <header class="header--  shadow-sm_">
    <b-navbar toggleable="lg" type="dark">
      <div class="container">
        <b-navbar-brand href="/">
          <img :src="require('~/static/img/icon_logo.png')" alt="" />
        </b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav class="ml-auto">
            <b-nav-item href="/" active>首页</b-nav-item>
            <b-nav-item-dropdown text="产品中心" right>
              <b-dropdown-item href="/products" active>肾行</b-dropdown-item>
              <b-dropdown-item href="#">无癎道</b-dropdown-item>
              <b-dropdown-item href="#">互联网医院</b-dropdown-item>
              <b-dropdown-item href="#">单病种数据管理平台</b-dropdown-item>
              <b-dropdown-item href="#">智能转诊平台</b-dropdown-item>
            </b-nav-item-dropdown>
            <b-nav-item href="/about">行业资讯</b-nav-item>
            <b-nav-item href="/contact">关于我们</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </div>
    </b-navbar>
  </header>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const header = document.querySelector(".header--");
      const scrollPosition = window.pageYOffset;
      if (scrollPosition > 0) {
        const opacity = Math.min(1, scrollPosition / 200);
        header.style.backgroundColor = `rgba(55, 114, 200, ${opacity})`;
      } else {
        header.style.backgroundColor = "transparent";
      }
    }
  }
};
</script>

<style lang="less" scoped>
.header-- {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
  .navbar-brand {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nav-item {
    padding-left: 20px;
    padding-right: 20px;
  }

  .dropdown-item {
    &.active {
      background-color: #fff;
      color: @primary;
    }
  }
  .nav-link {
    &.active {
      position: relative;
      &::after {
        display: block;
        content: "";
        position: absolute;
        bottom: -14px;
        left: 0;
        right: 0;
        height: 4px;
        background: #ffffff;
      }
    }
  }
}
</style>
